<template>
  <div>
    <div>
      <div style="display: flex;justify-content: space-between;margin-top: 10px">
        <div>
          <el-input size="mini" style="width: 300px;margin-right: 10px"
                    prefix-icon="el-icon-search"
                    v-model="uname"
                    @keydown.enter.native="initOrderList"
                    clearable
                    v-if="this.nameZh!='买家'"
                    @clear="initOrderList"
                    placeholder="请输入顾客名称搜索...">
          </el-input>
          <el-input size="mini" style="width: 200px;margin-right: 10px;margin-left: 10px"
                    prefix-icon="el-icon-search"
                    v-model="gid"
                    @keydown.enter.native="initOrderList"
                    clearable
                    @clear="initOrderList"
                    placeholder="请输入商品编号搜索...">
          </el-input>
          <el-button  size="mini"
                     type="primary" icon="el-icon-search" @click="initOrderList">搜索
          </el-button>
        </div>
        <div>
          <el-button v-if="this.nameZh!='买家'" size="mini" type="primary" icon="el-icon-plus" @click="showAddOrderView">添加订单</el-button>
        </div>
      </div>
    </div>
    <div style="margin-top: 10px">
      <el-table
          :data="ol"
          stripe
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          style="width: 100%">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="id"
            label="订单编号"
            fixed
            align="center"
            width="80">
        </el-table-column>
        <el-table-column
            prop="gid"
            label="商品编号"
            align="left"
            width="80">
        </el-table-column>
        <el-table-column
            prop="uname"
            label="顾客姓名"
            align="left"
            width="120">
        </el-table-column>
        <el-table-column
            prop="uaddress"
            label="顾客地址"
            align="left"
            width="180">
        </el-table-column>
        <el-table-column
            prop="uphoneNum"
            label="联系电话"
            align="left"
            width="180">
        </el-table-column>
        <el-table-column
            prop="ocreationDate"
            label="下单时间"
            align="left"
            width="180">
        </el-table-column>
        <el-table-column
            prop="ostatus"
            label="订单备注"
            align="left"
            width="150">
        </el-table-column>
        <el-table-column
            label="订单状态"
            align="left"
            width="90">
          <template scope="scope">
            <el-tag type="success" v-if="scope.row.oisFinished==1">交易成功</el-tag>
            <el-tag type="warning" v-else>待处理</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            v-if="this.nameZh!='买家'"
            label="操作"
            fixed="right"
            width="160">
          <template slot-scope="scope">
            <el-button @click="finishOrder(scope.row)" style="padding: 3px" size="mini" type="primary">交易成功</el-button>
            <el-button @click="failOrder(scope.row)" style="padding: 3px" size="mini" type="danger">交易失败</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 10px;display: flex;justify-content: flex-end">
        <el-pagination
            background
            @current-change="currentChange"
            @size-change="sizeChange"
            layout='sizes, prev, pager, next, jumper, ->, total'
            :page-size="size"
            :page-sizes="[5,10,20,30,40]"
            :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="70%">
      <div>
        <el-form ref="orderForm" :model="order" :rules="rules">
          <el-row>
            <el-col :span="5">
              <el-form-item label="商品编号" prop="gid">
                <el-input size="mini" style="width: 120px" prefix-icon="el-icon-edit"
                          v-model="order.gid" placeholder="输入商品编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="顾客名称:" prop="uname">
                <el-input size="mini" style="width: 120px" prefix-icon="el-icon-edit"
                          v-model="order.uname" placeholder="输入顾客名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系电话:" prop="uphoneNum">
                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit"
                          v-model="order.uphoneNum" placeholder="输入联系电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收货地址:" prop="uaddress">
                <el-input size="mini" style="width: 240px" prefix-icon="el-icon-edit"
                          v-model="order.uaddress" placeholder="请输入收货地址"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="订单备注:" prop="ostatus">
                <el-input size="mini" style="width: 240px" prefix-icon="el-icon-edit"
                          v-model="order.ostatus" placeholder="输入订单备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="doAddOrder">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "OrderList",
  data(){
    return {
      title:'',
      dialogVisible:false,
      loading:false,
      ol:[],
      total:0,
      currentPage:1,
      size:5,
      nameZh:"",
      uid:null,
      uname:"",
      gid:null,
      order: {
        id: null,
        gid: "",
        uname: "",
        uaddress: "",
        uphoneNum: "",
        ostatus: "",
      },
      rules:{
        gid: [{required: true, message: "请输入商品编号", trigger: 'blur'}],
        uname: [{required: true, message: "请输入顾客姓名", trigger: 'blur'}],
        uaddress: [{required: true, message: "请输入收货地址", trigger: 'blur'}],
        uphoneNum: [{required: true, message: "请输入电话号码", trigger: 'blur'}]
      }
    }
  },
  mounted() {
    this.initOrderList();
  },
  methods: {
    finishOrder(data){
      this.$confirm('是否确认与【'+data.uname+'】的本次订单交易成功?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.putRequest('/order/list/'+data.id+'/'+data.gid).then(resp=>{
          if (resp){
            this.initOrderList();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消该操作'
        });
      });
    },
    failOrder(data){
      this.$confirm('是否取消与【'+data.uname+'】的本次订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.putRequest('/order/list/fail/'+data.id).then(resp=>{
          if (resp){
            this.initOrderList();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消该操作'
        });
      });
    },

    doAddOrder(){
      if (this.order.id){
        this.$refs['orderForm'].validate(valid =>{
          if (valid){
            this.postRequest('/order/list/',this.order).then(resp=> {
              this.dialogVisible = false;
              this.initOrderList();
            })
          }
        })

      }else{
        this.$refs['orderForm'].validate(valid =>{
          if (valid){
            this.postRequest('/order/list/',this.order).then(resp=> {
              this.dialogVisible = false;
              this.initOrderList();
            })
          }
        })
      }
    },
    sizeChange(size){
      this.size = size;
      this.initOrderList();
    },
    currentChange(currentPage){
      this.currentPage = currentPage;
      this.initOrderList();
    },
    showAddOrderView(){
      this.title = '添加订单';
      this.order={
        id: null,
        gid: "",
        uname: "",
        uaddress: "",
        uphoneNum: "",
        ostatus: "",
      };
      this.dialogVisible = true;
    },
    initOrderList(){
      this.loading = true;
      this.nameZh = JSON.parse(window.sessionStorage.getItem('user'))["roles"][0]["nameZh"];
      this.uid = JSON.parse(window.sessionStorage.getItem('user'))["id"];
      let url = '';
      if (this.nameZh == '买家'){
        url = '/order/list/customer?currentPage='+this.currentPage+'&size='+this.size+'&uId='+this.uid+'&uName='+this.uname;
        if (this.gid!=null) url += '&gId='+this.gid;
      }else {
        url = '/order/list/?currentPage='+this.currentPage+'&size='+this.size+'&uName='+this.uname;
        if (this.gid!=null) url += '&gId='+this.gid;
      }
      console.log(url);
      this.getRequest(url).then(resp=>{
        this.loading = false;
        if (resp){
          this.ol = resp.data;
          this.total = resp.total;
        }
      })
    },
  }
}
</script>

<style scoped>

</style>